<!-- 地震影响场 -->
<template>
  <el-dialog v-model="open" :title="`${route.meta.title}:选择影响场数据`" @open="initOpen" @close="close">
    <p></p>
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
      <!-- <el-form-item label="省">
        <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable>
					<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="queryParams.city" placeholder="请选择市" clearable>
					<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
      </el-form-item> -->
      <el-form-item label="编号">
        <el-input v-model="queryParams.code"></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="queryParams.userName"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="resetBtn" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableList" v-loading="loading" @row-click="rowClick">
      <el-table-column label="选择" width="55" align="center">
        <template #default="{ row }">
          <el-radio-group v-model="selectedId">
            <el-radio :label="row.versionCode">{{ '' }}</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="省" prop="province" align="center" />
      <el-table-column label="影响场名称" prop="direction" align="center" />
      <el-table-column label="数据版本号" prop="versionCode" align="center" />
      <el-table-column label="版本说明" prop="earthquakeLevel" align="center" />
      <el-table-column label="创建人" prop="assessUserName" align="center" />
      <el-table-column label="创建时间" prop="assessTime" align="center" />
    </el-table>
    <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" />
    <template #footer>
      <el-button type="primary" @click="confirm" auto-insert-space>确定</el-button>
      <el-button @click="close" plain auto-insert-space>取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { influenceField } from '@/api/lifelineProject/taskManage'
import { getProvince, getChildArea } from "@/api/system/division"

const props = defineProps({
  open: Boolean,
  selected: String
})
const emits = defineEmits(['update:open', 'getInfluence'])
const route = useRoute()

const tableList = ref([])
const loading = ref(false)
const selectedId = ref('')
// 查看
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
// 省市县
const provinceData = ref([])
const cityData = ref([])
const getProvinceData = () => {
	getProvince().then(res => {
		if (res.code == 200) {
			provinceData.value = res.data
		}
	})
}
const chooseProvince = (value) => {
	queryParams.value.cityId = null
	queryParams.value.countyId = null
	queryParams.value.city = null
	queryParams.value.county = null
	cityData.value = []
	queryParams.value.provinceId = provinceData.value.find(item => item.id == value)?.name
	getChildArea(value).then(response => {
		cityData.value = response.data
	})
}

const getList = () => {
  loading.value = true;
  const { page, rows } = queryParams.value
  influenceField({page: page,rows: rows}).then(res => {
    tableList.value = res.data.rows || []
    queryParams.value.total = res.data.total
    loading.value = false
  })
}

const queryBtn = () => {
  queryParams.value.page = 1
  getList()
}
const resetBtn = () => {
  proxy.resetForm('queryRef')
}

const initOpen = () => {
  getProvinceData()
  queryBtn()
  selectedId.value = props.selected
}
const rowClick = (row) => {
  selectedId.value = row.fsiId
}
const close = () => {
  emits('update:open', false)
}
const confirm = () => {
  emits('getInfluence', selectedId.value)
  close()
}
</script>
<style scoped></style>